<template>
	<view>
		<form @submit="submit" @reset="reset">
			<uni-calendar lunar :startDate='today' ref='fixTime' :insert="false" :clearDate="false" @confirm="selFixTime"></uni-calendar>
			<view class="cell">
				<view class="cell-title">用户类型</view>
				<radio-group class="horizontal cell-content" name="userType" @change="changeType">
					<label>
						<radio checked :value="1"/><text>个人用户</text>
					</label>
					<label>
						<radio :value="2"/><text>单位用户</text>
					</label>
				</radio-group>
			</view>
			
			<view class="cell required" v-if="post.userType==2">
				<view class="cell-title">单位全称</view>
				<input class="cell-content" name='companyName' v-model="post.companyName" confirm-type="next" 
				placeholder="请输入单位全称"/>
			</view>
			
			<view class="cell required">
				<view class="cell-title">联系人</view>
				<input class="cell-content" name='name' v-model="post.name" confirm-type="next" 
				placeholder="请输入联系人姓名" maxlength="5"/>
			</view>
			
			<view class="cell required">
				<view class="cell-title">地域</view>
				<picker class="cell-content" mode="region" @change="changeRegion">
					<view v-if="region.length>0">{{region.join(' - ')}}</view>
					<view v-else class="placeholder">请选择省市区</view>
				</picker>
			</view>
			
			<view class="cell required">
				<view class="cell-title">小区</view>
				<view class="cell-content">
					<xflSelect placeholder="请选择小区" :list="opts.communities" @change="selCommunity"></xflSelect>
					<view style="display: flex;margin-top: 10rpx;">
						<xflSelect style="flex-grow: 1;flex-shrink: 1;" placeholder="楼号" :list="opts.builds" @change="selBuilding"></xflSelect>
						<xflSelect style="flex-grow: 1;flex-shrink: 1;" placeholder="单元" :list="opts.units" @change="selUnit"></xflSelect>
						<xflSelect style="flex-grow: 1;flex-shrink: 1;" placeholder="房号" :list="opts.rooms" @change="selRoom"></xflSelect>
					</view>
				</view>
			</view>
			
			<view class="cell">
				<view class="cell-title">上门时间</view>
				<view class="cell-content" style="flex-grow: 0;flex-shrink: 0;" @tap="openTime">
					<view v-if="!post.visitDate" class="placeholder">上门日期</view>
					<view v-else>{{post.visitDate | smartTime('YY/mm/dd')}}</view>
				</view>
				<xfl-select class="cell-content scale" style="flex-grow: 1;flex-shrink: 1;" :list="segments" placeholder="上门时间"  @change="selTime"></xfl-select>
			</view>

			<view class="cell required">
				<view class="cell-title">联系电话</view>
				<input class="cell-content" name='contactPhone' v-model="post.contactPhone" confirm-type="done"
				placeholder="请输入联系电话" maxlength="11" type="number"/>
<!-- 				<button :disabled="post.contactPhone.length<7" v-if="!verifyCode.sended" type="primary" @tap="requireCode" size="mini" style="min-width: max-content;">获取验证码</button>
				<button disabled v-else size="mini" style="min-width: max-content;">{{verifyCode.lefted}}秒</button> -->
			</view>
			<view class="bottom horizontal">
				<button style="color: white;background-color: var(--color-ok);" class="capsule scale" form-type="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import mkUpload from "@/components/mk-upload/mk-upload.vue"
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	import roomCascade from '../../mixins/roomCascade.js'
	
	import {segments} from '@/static/constants.js'
	
	const app = getApp()
	
	export default {
		components:{
			mkUpload, xflSelect,
		},
		mixins:[roomCascade,],
		computed:{
			today() {
				return new Date().toLocaleDateString()
			}
		},
		data() {
			return {
				segments,
				verifyCode:{
					code: '',
					sended:false,
					lefted: 60,
					timer: '',
				},
				code: '',
				
				post:{
					name: '',										// 联系人姓名
					code:'',	
					companyName: '',								// 公司名称
					userType: 1,									// 户主类型
					contactPhone: '',								// 联系电话
					visitDate: '',									// 上门日期
					visitStartTime: '',								// 上门开始时间
					visitEndTime: '',								// 上门结束时间
				},
			}
		},
		destroyed() {
			clearInterval(this.verifyCode.timer)
		},
		methods: {
			selTime(e){
				const [start, end] = e.newVal.split('-')
				this.post.visitStartTime = start
				this.post.visitEndTime = end
			},
			requireCode(){
				this.verifyCode.sended = true
				this.verifyCode.lefted = 60
				this.verifyCode.timer = setInterval(()=>{
					if(this.verifyCode.lefted>0){
						this.verifyCode.lefted--
					}else{
						this.verifyCode.sended = false
						this.verifyCode.lefted = 60
						clearInterval(this.verifyCode.timer)
						this.verifyCode.timer = ''
					}
				}, 1000)
				uni.showToast({
					title: '验证码已发送！'
				});
			},
			openTime(){
				this.$refs.fixTime.open()
			},
			selFixTime(e){
				const {
					year,
					month,
					date
				} = e;
				this.post.visitDate = `${year}/${month}/${date}`
			},
			changeType(evt){
				const value = evt.detail.value
				this.post.userType = value
			},
			submit(){
				// const imgs = this.$refs.upload.getImages();
				if(!this.post.name || !this.post.contactPhone){
					uni.showToast({
						title:'联系人和联系方式必填！',
						icon:'none',
						duration:5000,
					})
					return
				}
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.curl + 'workOrder/reportInstall',
					method: 'POST',
					data: this.post,
					success: res => {
						const {data} = res
						if(data.code==200){
							uni.showModal({
								title:'提示',
								showCancel:false,
								content:'提交成功，我们工作人员会尽快与您联系！',
								success: (res) => {
									if(res.confirm){
										uni.redirectTo({
											url:"../progress/progress?status==0",
										})
									}
								}
							})
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
				});
			},
		}
	}
</script>

<style scoped>

	.build{
		border: solid 1px gray;
		width: 100rpx;
		text-align: right;
		font-size: small;
		height: 40rpx;
		padding: 0;
	}
</style>
